<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include::header"></head>
<link th:href="@{/static/css/plugins/jasny/jasny-bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/static/css/plugins/uploadifive/uploadifive.css}" rel="stylesheet"/>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-11">
            <form class="form-horizontal m-t layui-form" id="studentForm">
                <div class="form-group col-sm-8">
                    <div class="form-group ">
                        <label class="col-sm-5 control-label">学号：</label>
                        <div class="layui-input-inline col-sm-6">
                            <input id="stuId" name="stuId" class="form-control"
                                   type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-5 control-label">姓名：</label>
                        <div class="layui-input-inline col-sm-6">
                            <input id="stuName" name="stuName" class="form-control"
                                   type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-5 control-label">年龄：</label>
                        <div class="layui-input-inline col-sm-6">
                            <input id="stuAge" name="stuAge" class="form-control"
                                   type="text">
                        </div>

                    </div>
                    <div class="form-group">
                        <label class="col-sm-5 control-label">性别：</label>
                        <div class="layui-input-inline" style="float: left ;padding-left: 18px">
                            <input type="radio" name="stuSex" value="1" title="男" checked="">
                            <input type="radio" name="stuSex" value="0" title="女">
                        </div>

                    </div>
                    <input type="hidden" id="stuImage" name="stuImage"/>
                </div>
                <div class="form-group col-sm-4">
                    <div class="form-group col-sm-12" >
                        <div style="width: 120px;height: 150px;">
                            <img id="showImg" style="width: 120px;height: 150px;" th:src="@{/static/img/defaultPhoto.png}" alt="头像">
                        </div>
                    </div>
                    <div class="layui-input-inline col-sm-12">
                        <input type="file" id="uploadify"/>
                    </div>
                </div>
                <div class="form-group col-sm-11">
                    <label class="col-sm-4 control-label" style="width: 29.5%;">所属院系:</label>
                    <div class="col-sm-8">
                        <div class="layui-input-inline">
                            <select name="colId" id="colId" lay-search="" lay-filter="colId">
                                <option value="" selected="">搜索或选择学院</option>
                                <option th:each="college:${colleges}" th:value="${college.id}">[[${college.colName}]]</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="majId" id="majId" lay-search="" disabled="disabled" lay-filter="majId">
                                <option value="">请先选择学院</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="claId" id="claId" lay-search="" disabled="disabled" lay-filter="claId">
                                <option value="">请先选择学院</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group col-sm-11">
                    <label class="col-sm-4 control-label" style="width: 29.5%;">入学年份:</label>
                    <div class="layui-input-inline col-sm-4">
                        <input type="text" readonly class="form-control" onclick="resetDate()" placeholder="yyyy-MM-dd" id="inDate" name="inDate">
                        <!--<label class="laydate-icon inline demoicon" onclick="laydate({elem: '#inDate'});"></label>-->
                    </div>
                    <label class="control-label" style="float: left ;">手机：</label>
                    <div class="layui-input-inline col-sm-3">
                        <input type="text" name="stuPhone" id="stuPhone" class="form-control" data-mask="999-9999-9999" placeholder="">
                    </div>
                </div>
                <div class="form-group col-sm-11">
                    <label class="col-sm-4 control-label" style="width: 29.5%;">邮箱：</label>
                    <div class="layui-input-inline col-sm-3">
                        <input type="text" name="stuEmail" id="stuEmail" class="form-control" placeholder="">
                    </div>
                </div>
                <div class="form-group col-sm-11">
                    <label class="col-sm-4 control-label" style="width: 29.5%;">宿舍信息:</label>
                    <div class="col-sm-8">
                        <div class="layui-input-inline">
                            <select name="floorId" id="floorId" lay-search="" lay-filter="floorId">
                                <option value="" selected="">搜索或选择宿舍楼</option>
                                <option th:each="floor:${floors}" th:value="${floor.id}">[[${floor.floorName}]]</option>

                            </select>
                        </div>
                        <div class="layui-input-inline" >
                            <select name="dormId" id="dormId" lay-search="" disabled lay-filter="dormId">
                                <option value="">请先选择宿舍楼</option>

                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="bedId" id="bedId" lay-search="" disabled lay-filter="bedId">
                                <option value="">请先选择宿舍楼</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-8 col-sm-offset-3">
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div id="pro" style="position:fixed; top:0;width: 50%;margin-left: 25%;">

</div>
<div th:include="include::footer"></div>
<script th:src="@{/static/js/plugins/layer/laydate/laydate.js}"></script>
<!-- Input Mask-->
<script th:src="@{/static/js/plugins/jasny/jasny-bootstrap.min.js}"></script>
<script th:src="@{/static/js/plugins/uploadifive/jquery.uploadifive.js}" type="text/javascript"
        charset="utf-8"></script>
<script>
    //定义一些变量,用来判断下拉框相关逻辑
    var colId="";
    var majId="";
    var claId="";
    var floorId="";
    var dormId="";
    var bedId="";
</script>
<script type="text/javascript" th:src="@{/static/js/admin/student/stu_add.js}"></script>
</body>

<script>
    layui.use(['form'], function () {
        var form = layui.form;
        //定义select下拉联动逻辑
        form.on('select(colId)', function(data){
            if(data.value==colId){
                //当前选中未改变
                return;
            } else {
                colId = data.value;
                if(isNull(data.value)){
                    //将系和班级恢复初始状态
                    layui.$("#majId").empty();
                    layui.$("#majId").append(deFaultOption("请先选择学院"));
                    layui.$("#majId").prop("disabled","disabled");
                    layui.$("#claId").empty();
                    layui.$("#claId").prop("disabled","disabled");
                    layui.$("#claId").append(deFaultOption("请先选择学院"));
                } else {
                    //加载系的内容
                    layui.$("#majId").removeAttr("disabled");
                    loadOption("#majId","/dorm/student/getMajByCol/"+data.value,"搜索或选择专业")
                    //将系和班级恢复初始状态
                    layui.$("#claId").empty();
                    layui.$("#claId").prop("disabled","disabled");
                    layui.$("#claId").append(deFaultOption("请先选择专业"));
                }
            }
            resetSelect();
        });
        form.on('select(majId)', function(data){
            if(data.value==majId){
                return;
            } else {
                majId = data.value;
                if(isNull(data.value)){
                    //将系和班级恢复初始状态
                    layui.$("#claId").empty();
                    layui.$("#claId").prop("disabled","disabled");
                    layui.$("#claId").append(deFaultOption("请先选择专业"));
                } else {
                    //加载班级的内容
                    layui.$("#claId").removeAttr("disabled");
                    loadOption("#claId","/dorm/student/getClaByMaj/"+data.value,"搜索或选择班级")
                }
            }
            resetSelect();
        });
        form.on('select(floorId)', function(data){
            if(data.value==floorId){
                return;
            } else {
                floorId = data.value;
                if(isNull(data.value)){
                    layui.$("#dormId").empty();
                    layui.$("#dormId").append(deFaultOption("请先选择宿舍楼"));
                    layui.$("#dormId").prop("disabled","disabled");
                    layui.$("#bedId").empty();
                    layui.$("#bedId").prop("disabled","disabled");
                    layui.$("#bedId").append(deFaultOption("请先选择宿舍楼"));
                } else {
                    layui.$("#dormId").removeAttr("disabled");
                    loadOption("#dormId","/dorm/student/getDormByFloor/"+data.value,"搜索或选择宿舍")
                    layui.$("#bedId").empty();
                    layui.$("#bedId").prop("disabled","disabled");
                    layui.$("#bedId").append(deFaultOption("请先选择宿舍"));
                }

            }
            resetSelect();
        });
        form.on('select(dormId)', function(data){
            if(data.value==dormId){
                return;
            } else {
                dormId = data.value;
                if(isNull(data.value)){
                    //将系和班级恢复初始状态
                    layui.$("#bedId").empty();
                    layui.$("#bedId").prop("disabled","disabled");
                    layui.$("#bedId").append(deFaultOption("请先选择宿舍"));
                } else {
                    //加载班级的内容
                    layui.$("#bedId").removeAttr("disabled");
                    loadOption("#bedId","/dorm/student/getBedByDorm/"+data.value,"搜索或选择床铺")
                }

            }
            resetSelect();
        });
        form.on('select(claId)',function (data) {
            if(data.value==claId){
                return;
            } else {
                claId = data.value;
            }
        });
        form.on('select(bedId)',function (data) {
            if(data.value==bedId){
                return;
            } else {
                bedId = data.value;
            }
        });

    });

    var format = new Date().Format("yyyy-MM-dd");
    $("#inDate").val(format);
    function resetDate() {
        //外部js调用
        laydate({
            elem: '#inDate'
        });
    }

    function deFaultOption(optionDesc) {
        var arr = new StringBulider();
        arr.append("<option")
            .append(' value="0"')
            .append(">")
            .append(optionDesc)
            .append("</option>");
        return arr.toString();
    }
    function loadOption(id,url,desc) {
        //移除select
        jQuery(id).empty();
        $.ajax({
            url: path.format(url),
            type: "get",
            data: {},
            success: function (r) {
                var data = JSON.parse(r);
                if (data.status == 1000) {
                    var arr = new StringBulider();
                    arr.append("<option")
                        .append(' value=""')
                        .append()
                        .append(">")
                        .append(desc)
                        .append("</option>");
                    for (var i=0;i<data.model.length;i++){
                        arr.append("<option")
                            .append(" value=")
                            .append(data.model[i].id)
                            .append(">")
                            .append(data.model[i].name)
                            .append("</option>");
                    }
                    jQuery(id).append(arr.toString());
                    resetSelect();
                } else {
                    layer.msg(data.desc,function () {

                    });
                }
            }
        });
    }
    function resetSelect() {
        layui.use(['form'], function () {
            var form = layui.form;
            form.render('select');
        });
    }
</script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var s = /*[[@{/dorm/upload/upload}]]*/;
    /*]]>*/
        $('#uploadify').uploadifive({
            uploadScript: s,	// 服务器端处理地址
            width: 100,                          // 按钮的宽度
            height: 23,                         // 按钮的高度
            buttonText: "上传图片",                 // 按钮上的文字
            buttonCursor: 'cursor',                // 按钮的鼠标图标
            fileObjName: 'headPhoto',			// 上传参数名称
            successTimeout: 6000,
            removeCompleted: true,//上传完成之后移除
//            formData:,
            queueID: 'pro',
            // 两个配套使用
            fileType: ".gif,.jpeg,.jpg,.png",             // 扩展名
//            fileSizeLimit:'20KB',
            auto: true,                // 选择之后，自动开始上传
            multi: false,               // 是否支持同时上传多个文件
            queueSizeLimit: 1,          // 允许多文件上传的时候，同时上传文件的个数
            onUploadComplete: function (file, data, response) {
                data = JSON.parse(data);
                if(data.status == 1000) {
                    $("#showImg").attr("src", data.desc);
                    $("#stuImage").val(data.desc);
                }
            },
            onAddQueueItem: function (file) {
                //添加之前从队列移除
                $('#uploadify').uploadifive("clearQueue");
            },
            onProgress: function (file, e) {
                if (e.lengthComputable) {
                    var percent = Math.round((e.loaded / e.total) * 100);
                }
                file.queueItem.find('.fileinfo').html(' - ' + percent + '%');
                file.queueItem.find('.progress-bar').css('width', percent + '%');
            }
        });


</script>


</html>
